<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		.warning{
			color: #f24;
		}
		.safe{
			color: #42b983;
		}
	</style>
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>
<div id="root">
  <span :class="{warning:isWarning,safe:!isWarning}" v-on:click="toggle">
  状态:{{alert}}{{!isWarning}}
  </span>	
</div>
<script>
	/**
	 * 绑定数据用v-bind:命令，简写成
	 * 语法：<div v-bind:class="{ active: isActive }"></div>。
	 * class后面的双引号里接受一个对象字面量/对象引用/
	 * 数组作为参数，
	 * 这里，{active: isActive}是对象参数，
	 * active是class名,isActive是一个布尔值。下面是一个例子：
	 */
	//绑定对象字面量
	var vm = new Vue({
		el : '#root',
		data : {
			isWarning:true,//一开始是true
    		alertList:['红色警报','警报解除'],
    		alert:''
		},
		computed:{
	    	// isSafe:function(){
	     // 	 return !this.isWarning;
	    	// }
 		 },
		  methods:{
		    toggle:function(){
		      this.isWarning=!this.isWarning;
		      this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
		    }
		  }
	});
</script>	
</body>
</html>